<template>
	<view class="content">
		<view class="swiperBox">
			<swiper class="swiper-item" circular='true' autoplay="true" :interval="3000" :duration="1000">
				<swiper-item class="swiper-item" v-for="(item,index) in content.projectImg" :key="index">
					<image :src="item" class="itemImg"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="box1">
			<text class="name">{{content.name}}</text>
			<image :src="$baseurl+'project/icon1.png'" class="state"></image>
			<view class="labelBox">
				<view class="labelItem">
					{{content.tag}}
				</view>
			</view>
			<view class="priceBox">
				<text class="price">{{content.price}}</text>
				<text class="label">均价(元/m²)</text>
			</view>
			<view class="numBox">
				{{content.share_num}}人分享 | {{content.onlookers_num}}人围观
			</view>
			<view class="addressBox">
				<image :src="$baseurl+'project/icon7.png'" class="addressIcon"></image>
				<text class="label">{{content.sale_address}}</text>
				<text class="arrow">></text>
			</view>
			<view class="line"></view>
		</view>
		<view class="huxingBox">
			<view class="typeBox">
				<image :src="$baseurl+'project/1.png'" class="showIcon"></image>
				<image :src="$baseurl+typeUrl" class="typeIcon" @click="changeType"></image>
			</view>
			<scroll-view scroll-x="true" class="huxingBoxInner" v-if="isHuxing">
				<view class="hxItem" v-for="(item,index) in huxingPic" :key="index">
					<image :src="item.url" class="item"></image>
					<image :src="$baseurl+'project/icon2.png'" class="big" @click="showBig(index)"></image>
				</view>
			</scroll-view>
			<scroll-view scroll-x="true" class="xiangmuInner" v-else>
				<view class="hxItem" v-for="(item,index) in content.projet_img" :key="index">
					<image :src="item" class="item"></image>
					<image :src="$baseurl+'project/icon2.png'" class="big" @click="showBig(index)"></image>
				</view>
			</scroll-view>
			<image :src="$baseurl+'project/2.png'" class="arrowIcon"></image>
		</view>
		<view class="aroundBox">
			<image :src="$baseurl+'project/3.png'" class="aroundLabel"></image>
			<view class="navBox">
				<v-tabs v-model="current" :scroll="false" :tabs="tabs" fontSize="25rpx" @change="changeTab"
					color="#000000" activeColor="#73A7B7" height="50rpx" lineHeight="5rpx" lineColor="#73A7B7"
					lineScale="0.3" bgColor="transparent">
				</v-tabs>
			</view>
			<view class="mapBox">
				<map id="map" style="width: 100%; height: 100%;" scale="15" :latitude="content.latitude" :longitude="content.longitude"
					:markers="markers" @markertap="markertap"></map>
			</view>
			<view class="mianzeBox">
				<text class="title">免责条款</text>
				<text class="info">{{content.agreement}}</text>
			</view>
		</view>
		<view class="guwenBox">
			<image :src="$baseurl+'project/4.png'" class="guwenLabel" @click="$navto.navto('../consultant/consultant',{id:this.id})"></image>
			<view class="guwenItem" v-for="(item,index) in guwenList" :key="index">
				<image :src="item.head" class="avatar"></image>
				<text class="name">{{item.name}}</text>
				<text class="describe">{{item.tag}}</text>
				<button open-type="contact" class="zixun"></button>
				<image :src="$baseurl+'project/icon5.png'" class="tel" @click="$makePhoneCall(item.phone)"></image>
			</view>
		</view>
		<view class="msgBox">
			<image :src="$baseurl+'project/5.png'" class="msgLabel"></image>
			<view class="msgItem" v-for="(item,index) in msg" :key="index">
				<image :src="item.avatar" class="msgAvatar"></image>
				<text class="msgName">{{item.nickname}}</text>
				<text class="msgInfo">{{item.content}}</text>
				<view class="line"></view>
			</view>
			<view class="btnBox" @click="login===false?$navto.navto('../../packageB/login/login'):$navto.navto('../leave_message/leave_message',{id:this.id})">我要留言</view>
		</view>
		<view class="infoBox">
			<image :src="$baseurl+'project/6.png'" class="infoLabel" @click="$navto.navto('../project_img/project_img',{id:this.id})"></image>
			<image :src="content.buildings_img" class="infoCover"></image>
			<view class="infoItem infoItem1">案名：{{content.name}}</view>
			<view class="infoItem" v-if="content.sell_status==1">销售状态：在售</view>
			<view class="infoItem" v-else>销售状态：即将开售</view>
			<view class="infoItem">特质描述：{{content.keywords}}</view>
			<view class="infoItem infoItem4">均价：{{content.price}}</view>
			<text class="peitaoLabel">筛选需要标注的主要配套：</text>
			<view class="infoContent">
				<mp-html :content="content.assort" />
			</view>
		</view>
		<view class="menuBox">
			<!-- <image :src="$baseurl+'project/test.png'" class="infoCover"></image> -->
			<button open-type="share" class="share"></button>
			<view class="orderBox" @click="login===false?$navto.navto('../../packageB/login/login'):$navto.navto('../order/order',{id:this.id})">预约看房</view>
		</view>
	</view>
</template>

<script>
	import {
		storeToRefs
	} from 'pinia'
	import {
		useUserStore
	} from '@/stores/user'
	const userStore = useUserStore()
	const {
		isLogin
	} = storeToRefs(userStore)
	export default {
		data() {
			return {
				content: '',
				typeUrl: 'project/icon14.png',
				isHuxing: true,
				huxingPic: [],
				current: 0,
				tabs: ['交通', '医疗', '教育', '娱乐'],
				guwenList: [],
				id:'',
				msg:[],
				login:''
			}
		},
		onShow() {
			this.login=isLogin.value;
			console.log(this.login);
		},
		onLoad(options) {
			this.id=options.id;
			// 项目详情
			this.$request.get(`project.project/detail?project_id=${options.id}`).then(res => {
				console.log(res.data.data);
				this.content = res.data.data;
			})
			// 项目顾问
			this.$request.get(`project.ProjectBroker/lists?project_id=${options.id}`).then(res => {
				console.log(res.data.data);
				this.guwenList = res.data.data.lists;
			})
			// 项目户型图
			this.$request.get(`project.ProjectIchnography/lists?project_id=${options.id}`).then(res => {
				console.log(res.data.data);
				this.huxingPic = res.data.data.lists;
				console.log(this.huxing);
			})
			// 项目留言
			this.$request.get(`project.ProjectMsg/lists?project_id=${options.id}`).then(res => {
				console.log(res.data.data);
				this.msg = res.data.data.lists;
			})
		},
		methods: {
			changeTab(index) {
				this.current=index;
			},
			changeType() {
				if (this.isHuxing) {
					this.typeUrl = 'project/icon13.png'
				} else {
					this.typeUrl = 'project/icon14.png'
				}
				this.isHuxing = !this.isHuxing;
			},
			// 查看大图
			showBig(index) {
				let url;
				if (this.isHuxing) { //查看户型大图
					url = this.huxingPic[index].url
				} else {
					url = this.content.projet_img[index]
				}
				let urlArr=[];
				urlArr.push(url);
				uni.previewImage({
					urls: urlArr,
				});
			},
		}
	}
</script>

<style lang="scss">
	.menuBox {
		position: fixed;
		width: 670rpx;
		height: 50rpx;
		margin-left: 40rpx;
		bottom: 100rpx;
		display: flex;
		justify-content: space-between;

		.orderBox {
			width: 520rpx;
			height: 100rpx;
			border-radius: 50rpx;
			background-color: #73a7b7;
			text-align: center;
			line-height: 100rpx;
			color: #fff;
			font-size: 28rpx;
			font-weight: 700;
		}

		.share {
			width: 140rpx;
			height: 100rpx;
			background: url('https://miantou.guguan.net/img/project/icon6.png');
			background-size: 100% 100%;
		}
	}

	.infoBox {
		width: 670rpx;
		margin-top: 155rpx;
		margin-left: 40rpx;
		margin-top: 170rpx;
		margin-bottom: 100rpx;

		.infoContent {
			width: 670rpx;
			display: block;
			    margin-top: 40rpx;
		}

		.peitaoLabel {
			font-size: 20rpx;
			font-weight: 700;
			margin-top: 60rpx;
			display: block;
		}

		.infoItem {
			width: 670rpx;
			height: 80rpx;
			border-top: 1rpx solid #d6d6d6;
			border-left: 1rpx solid #d6d6d6;
			border-right: 1rpx solid #d6d6d6;
			line-height: 80rpx;
			padding-left: 35rpx;
			color: #292929;
			font-size: 20rpx;
			font-weight: 500;
			overflow:hidden;
			  white-space: nowrap;
			  text-overflow: ellipsis
		}

		.infoItem1 {
			border-bottom: 0;
			font-size: 24rpx;
			font-weight: 700;
		}

		.infoItem4 {
			border-bottom: 1rpx solid #d6d6d6;
		}

		.infoLabel {
			width: 670rpx;
			height: 100rpx;
			margin-bottom: 100rpx;
		}

		.infoCover {
			width: 670rpx;
			height: 430rpx;
			margin-bottom: 60rpx;
		}
	}

	.btnBox {
		width: 270rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #73a7b7;
		margin-top: 115rpx;
		margin-left: 200rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-size: 24rpx;
		font-weight: 700;
	}

	.msgBox {
		width: 670rpx;
		margin-top: 170rpx;
		margin-left: 40rpx;
		position: relative;

		.msgItem {
			width: 670rpx;
			height: 150rpx;
			position: relative;
			margin-bottom: 60rpx;

			.line {
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 1rpx;
				background-color: #000;
			}

			.msgInfo {
				position: absolute;
				font-size: 20rpx;
				font-weight: 500;
				color: #8E8E8E;
				top: 56rpx;
				left: 130rpx;
			}

			.msgName {
				position: absolute;
				font-size: 24rpx;
				font-weight: 700;
				color: #292929;
				left: 130rpx;
			}

			.msgAvatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}

		.msgLabel {
			width: 670rpx;
			height: 96rpx;
			margin-bottom: 107rpx;
		}
	}

	.guwenBox {
		width: 670rpx;
		margin-top: 155rpx;
		margin-left: 40rpx;

		.guwenItem {
			width: 100%;
			height: 235rpx;
			position: relative;
			border-radius: 15rpx;
			border: 1rpx solid #f0f0f0;
			background-color: #fff;

			.avatar {
				position: absolute;
				width: 252rpx;
				height: 194rpx;
				left: 20rpx;
				top: 20rpx;
				border-radius: 15rpx;
			}

			.name {
				position: absolute;
				font-size: 28rpx;
				font-weight: 700;
				color: #292929;
				top: 50rpx;
				left: 320rpx;
			}

			.describe {
				position: absolute;
				left: 320rpx;
				top: 88rpx;
				font-size: 16rpx;
				line-height: 16rpx;
				color: #000000;
				display: inline-block;
				overflow: auto;
				border-radius: 0rpx 15rpx 15rpx 15rpx;
				background-color: #E8F7FC;
				padding: 10rpx;
			}

			.zixun {
				position: absolute;
				width: 64rpx;
				height: 64rpx;
				left: 510rpx;
				top: 126rpx;
				background: url('https://miantou.guguan.net/img/project/icon4.png');
				background-size: 100% 100%;
			}

			.tel {
				position: absolute;
				width: 64rpx;
				height: 64rpx;
				left: 590rpx;
				top: 126rpx;
			}
		}

		.guwenLabel {
			width: 670rpx;
			height: 98rpx;
			margin-bottom: 100rpx;
		}
	}

	.aroundBox {
		width: 675rpx;
		margin-top: 170rpx;
		margin-left: 40rpx;

		.mianzeBox {
			width: 670rpx;
			// height: 160rpx;
			margin-top: 78rpx;
			overflow-y: scroll;
			display: flex;
			flex-direction: column;

			.title {
				display: block;
				height: 23rpx;
				line-height: 23rpx;
				font-size: 24rpx;
				color: #292929;
				text-align: left;
				margin-top: 0;
			}

			.info {
				display: block;
				margin-top: 37rpx;
				font-size: 24rpx;
				color: #292929;
				line-height: 35rpx;
				text-align: left;
				margin-top: 30rpx;
			}
		}

		.mapBox {
			width: 670rpx;
			height: 390rpx;
			margin-top: 60rpx;
			background: url('https://pastoral.cdguguai.net.cn/static/img/project/map.png');
			background-size: 100% 100%;
		}

		.navBox {
			width: 675rpx;
			margin-top: 89rpx;
			margin-left: -55rpx;
			margin-top: 100rpx;

			::v-deep .v-tabs__container {
				background-color: transparent !important;
			}
		}

		.aroundLabel {
			width: 675rpx;
			height: 115rpx;
		}
	}

	.huxingBox {
		width: 710rpx;
		// height: 1026rpx;
		margin-top: 100rpx;
		margin-left: 40rpx;

		.arrowIcon {
			width: 673rpx;
			height: 45rpx;
			margin-top: 55rpx;
		}

		.xiangmuInner {
			width: 710rpx;
			height: 430rpx;
			margin-top: 95rpx;
			overflow-x: scroll;
			position: relative;
			white-space: nowrap;

			.hxItem {
				position: relative;
				display: inline-block;
				width: 540rpx;
				height: 100%;
				margin-right: 20rpx;
				overflow: hidden;

				.item {
					width: 540rpx;
					height: 813rpx;
					display: block;
					border-radius: 10rpx 10rpx 0rpx 0rpx;
				}


				.big {
					position: absolute;
					bottom: 35rpx;
					right: 20rpx;
					width: 70rpx;
					height: 70rpx;
				}
			}

			.hxItem:nth-last-child(1) {
				margin-right: 60rpx;
			}
		}

		.huxingBoxInner {
			width: 710rpx;
			height: 813rpx;
			margin-top: 95rpx;
			overflow-x: scroll;
			position: relative;
			white-space: nowrap;

			.hxItem {
				position: relative;
				display: inline-block;
				width: 540rpx;
				height: 100%;
				margin-right: 20rpx;
				overflow: hidden;

				.item {
					width: 540rpx;
					height: 813rpx;
					display: block;
					border-radius: 10rpx 10rpx 0rpx 0rpx;
				}


				.big {
					position: absolute;
					bottom: 35rpx;
					right: 20rpx;
					width: 70rpx;
					height: 70rpx;
				}
			}

			.hxItem:nth-last-child(1) {
				margin-right: 60rpx;
			}
		}

		.typeBox {
			width: 675rpx;
			height: 45rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.showIcon {
				width: 144rpx;
				height: 40rpx;
			}

			.typeIcon {
				width: 270rpx;
				height: 50rpx;
			}
		}
	}

	.box1 {
		position: relative;
		width: 676rpx;
		margin-left: 37rpx;
		margin-top: 65rpx;
		height: 360rpx;

		.line {
			position: absolute;
			width: 100%;
			height: 1rpx;
			background-color: #292929;
			bottom: 0rpx;
		}

		.addressBox {
			width: 100%;
			height: 26rpx;
			position: absolute;
			top: 233rpx;

			.arrow {
				position: absolute;
				right: 0;
				font-size: 24rpx;
				font-weight: 500;
				color: #292929;
			}

			.label {
				margin-left: 45rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #292929;
				display: inline-block;
				width: 610rpx;
			}

			.addressIcon {
				width: 28rpx;
				height: 28rpx;
				position: absolute;
				top: 9rpx;
			}
		}

		.numBox {
			position: absolute;
			/* width: 245rpx; */
			height: 26rpx;
			top: 179rpx;
			right: 0;
			font-size: 16rpx;
			font-weight: 500;
			color: #292929;
		}

		.priceBox {
			position: absolute;
			top: 160rpx;
			display: flex;

			.label {
				font-size: 16rpx;
				font-weight: 500;
				color: #292929;
				margin-right: 0;
				margin-top: 17rpx;
			}

			.price {
				font-size: 32rpx;
				font-weight: 700;
				color: #FF6952;
				margin-right: 15rpx;
			}
		}

		.labelBox {
			position: absolute;
			width: 400rpx;
			height: 26rpx;
			top: 80rpx;
			display: flex;

			.labelItem {
				padding-left: 6rpx;
				padding-right: 6rpx;
				height: 26rpx;
				background-color: #4E97AD;
				border-radius: 4rpx;
				font-size: 14rpx;
				font-weight: 500;
				color: #fff;
				margin-right: 10rpx;
				line-height: 26rpx;
			}
		}

		.state {
			position: absolute;
			width: 67rpx;
			height: 78rpx;
			top: 0;
			right: 0;
		}

		.projectName {
			font-size: 40rpx;
			font-weight: 700;
			width: 600rpx;
		}
	}

	.swiperBox {
		width: 750rpx;
		height: 618rpx;

		.swiper-item,
		.itemImg {
			width: 100%;
			height: 100%;
		}
	}

	.content {
		width: 100%;
		height: 100%;
		background: url("https://miantou.guguan.net/img/project/bg.jpg");
		background-size: 100% 100%;
		padding-bottom: 100rpx;
	}
</style>